<template>
    <view class="container">
        <view class="scroll-view">
            <view class="record-list">
                <view class="record-item" v-for="(item, index) in recordList" :key="index">
                    <view class="record-header">
                        <text class="amount" :class="{ 'income': item.type === 0, 'expense': item.type === 1 }">
                            {{ item.type === 0 ? '+' : '-' }}{{ item.flowmoney }}
                        </text>
                        <text class="type">{{ item.type === 1 ? '支出' : '收入' }}</text>
                    </view>
                    <view class="record-content">
                        <view class="info-item">
                            <text class="label">来源：</text>
                            <text class="value">{{ item.source }}</text>
                        </view>
                        <view class="info-item">
                            <text class="label">时间：</text>
                            <text class="value">{{ formatDate(item.createtime) }}</text>
                        </view>
                        <view class="info-item" v-if="item.funddesc">
                            <text class="label">备注：</text>
                            <text class="value">{{ item.funddesc }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <u-loadmore :status="loadStatus" style="margin: 20rpx 0" />
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            recordList: [],
            loadStatus: 'loadmore',
            page: 1,
            pageSize: 10,
            scrollHeight: 0,
            user: null,
        }
    },
    async onLoad() {
        this.user = await uni.getStorageSync('user')
        this.loadData()
        this.calculateScrollHeight()
    },
    onReady() {
        this.calculateScrollHeight()
    },
    methods: {
        calculateScrollHeight() {
            const systemInfo = uni.getSystemInfoSync()
            this.scrollHeight = systemInfo.windowHeight
        },
        formatDate(dateStr) {
            if (!dateStr) return ''
            const date = new Date(dateStr)
            return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
        },
        loadData() {
            if (this.loadStatus === 'nomore') return
            this.loadStatus = 'loading'
            uni.request({
                url: '/api/bf/record/list',
                method: 'POST',
                data: {
                    pageNum: this.page,
                    pageSize: this.pageSize,
                    user: this.user
                },
                success: (res) => {
                    console.log(res);
                    const { flowOfFundsList, flowOfFundsPageInfo } = res.data
                    if (this.page === 1) {
                        this.recordList = flowOfFundsList
                    } else {
                        this.recordList = [...this.recordList, ...flowOfFundsList]
                    }
                    // 判断是否还有更多数据
                    this.loadStatus = this.recordList.length < flowOfFundsPageInfo.total ? 'loadmore' : 'nomore'
                },
                fail: (err) => {
                    uni.showToast({
                        title: '网络错误',
                        icon: 'none'
                    })
                    this.loadStatus = 'loadmore'
                }
            })
        },
        loadMore() {
            if (this.loadStatus === 'loading' || this.loadStatus === 'nomore') return
            this.loadStatus = 'loading'
            this.page++
            this.loadData()
        }
    },
    onReachBottom(){        
        this.loadMore()
    }
}
</script>

<style scoped lang="scss">
.container {
    padding: 30rpx;
    height: 100vh;
    box-sizing: border-box;
    background-color: #f8f9fa;
}

.scroll-view {
    width: 100%;
    padding-bottom: 10rpx;
}

.record-list {
    .record-item {
        background-color: #fff;
        border-radius: 16rpx;
        padding: 30rpx;
        margin-bottom: 24rpx;
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        
        &:active {
            transform: scale(0.98);
        }

        .record-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24rpx;
            padding-bottom: 20rpx;
            border-bottom: 2rpx solid #f5f5f5;

            .amount {
                font-size: 40rpx;
                font-weight: 600;
                font-family: 'DIN Alternate', sans-serif;

                &.income {
                    color: #00b578;
                }

                &.expense {
                    color: #ff4d4f;
                }
            }

            .type {
                font-size: 28rpx;
                color: #8c8c8c;
                background: #f5f5f5;
                padding: 6rpx 16rpx;
                border-radius: 20rpx;
            }
        }

        .record-content {
            .info-item {
                display: flex;
                margin-bottom: 16rpx;
                line-height: 1.6;

                &:last-child {
                    margin-bottom: 0;
                }

                .label {
                    color: #8c8c8c;
                    width: 120rpx;
                    font-size: 28rpx;
                }

                .value {
                    flex: 1;
                    color: #262626;
                    font-size: 28rpx;
                }
            }
        }
    }
}
</style>